<template>
  <div id="purchaseReview">
    <!-- 查询表单 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="申请人">
        <el-input v-model="searchForm.register" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="供应商公司名称">
        <el-input v-model="searchForm.supplierCompanyName" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="审核进度">
        <el-select v-model="searchForm.checkTag" placeholder="等待审核">
          <el-option label="等待审核" value="S001-1"></el-option>
          <el-option label="未通过" value="S001-2"></el-option>
          <el-option label="已通过" value="S001-3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-date-picker
            v-model="searchForm.registerTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="purchaseOrderNumber" label="订单编号" width="200" align="center"></el-table-column>
      <el-table-column prop="supplierId" label="供应商公司(联系电话)" width="290" align="center"></el-table-column>
      <el-table-column prop="totalPrice" label="总价格(元)" width="150" align="center"></el-table-column>
      <el-table-column prop="register" label="申请人" width="150" align="center"></el-table-column>
      <el-table-column prop="registerTime" label="申请时间" width="250" align="center"></el-table-column>
      <el-table-column prop="checkTag" label="审核状态" width="200" align="center">
        <template slot-scope="scope">
          {{ getCheckTagText(scope.row.checkTag) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="190" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.checkTag == 'S001-1'" size="mini" type="text" @click="handleReview(scope.row)" class="el-icon-edit">审核</el-button>
          <el-button v-else-if="scope.row.checkTag == 'S001-2'" size="mini" type="text" @click="handleReview(scope.row)" class="el-icon-edit">去审核</el-button>
          <!-- 删除: <el-button v-if="scope.row.checkTag == 'S001-3'" size="mini" type="text" @click="handleReview(scope.row)">审核</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right;"
    ></el-pagination>

    <!-- 弹出框 -->
    <el-dialog :visible.sync="reviewDialogVisible" width="80%">
      <div style="text-align: center">
        <h1>采购(审核)</h1>
      </div>
      <div class="review-content">
        <div style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-button type="danger" @click="noReview" plain  class="el-icon-check"> 拒绝请求</el-button>
              <el-button @click="submitReview" type="success"  class="el-icon-check"> 通过审核</el-button>
              <el-button type="danger" class="el-icon-refresh"> 返回</el-button>
            </el-col>
          </el-row>
        </div>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单编号:">
                {{ orderInfo.purchaseOrderNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="总计:">
                {{ orderInfo.totalPrice }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="登记人:">
                {{ orderInfo.payer}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="登记时间:">
                {{ orderInfo.registerTime }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="productTableData" style="width: 100%;height: 300px">
          <el-table-column label="图片" align="center">
            <template slot-scope="scope">
              <img :src="'/img'+scope.row.image" alt="商品图片" style="width: 50px; height: 50px;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="price" label="单价(元)" align="center"></el-table-column>
          <el-table-column prop="unit" label="商品单位" align="center"></el-table-column>
          <el-table-column prop="count" label="数量(件)" align="center"></el-table-column>
          <el-table-column prop="subtotal" label="小计(元)" align="center"></el-table-column>
        </el-table>
        <el-form ref="reviewForm" :model="reviewForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人:" prop="reviewer">
                <el-input style="width: 200px" v-model="reviewForm.reviewer" placeholder="请输入审核人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间:">
                <el-input style="width: 200px" v-model="reviewForm.reviewerTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核理由:" prop="reason">
                <el-input type="textarea" v-model="reviewForm.reason" placeholder="请输入理由" maxlength="50" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "PurchaseRv",
  data() {
    return {
      searchForm: {
        register: "",
        supplierCompanyName: "",
        checkTag: "",
        registerTime: []
      },
      tableData: [
        {
          purchaseOrderNumber:"",
          totalPrice:"",
          register:"",
          registerTime:""
        }
      ],
      productTableData: [
        {
          image: "",
          name: "",
          price: "",
          unit: "",
          count: "",
          subtotal: ""
        }
      ],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      reviewDialogVisible: false,
      currentRow: {},
      orderInfo: {
        purchaseOrderNumber: "",
        totalPrice: "",
        register: "",
        registerTime: "",
        payer: ""
      },
      reviewForm: {
        reviewer: '',
        reason: '',
        reviewerTime: ''
      },
      reviewRules: {
        reviewer: [
          { required: true, message: '请输入审核人', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入审核理由', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    // 初始化表格数据
    initTable() {
      Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize, "CheckTage": "S001-1"});
      console.log(this.searchForm);
      this.$axios.post("http://localhost:8090/purchase-order/purchaseReview", this.searchForm).then(({ data }) => {
        console.log(data);
        this.tableData = data.map(item => ({
          purchaseOrderNumber: item.purchaseOrderNumber,
          supplierId: item.supplier.companyName +"("+ item.supplier.phone +")",
          totalPrice: item.totalPrice + "元",
          register: item.register,
          registerTime: item.registerTime,
          checkTag: item.checkTag
        }));
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      });
    },
    //提交审核
    submitReview() {
      this.$refs.reviewForm.validate((valid) => {
        if (valid) {
          // 判断审核人和审核理由是否有值
          if (!this.reviewForm.reviewer || !this.reviewForm.reason) {
            this.$message({
              type: 'warning',
              message: '审核人和审核理由不能为空!'
            });
            return;
          }

          if (this.reviewForm.reviewer === this.orderInfo.payer) {
            this.$message({
              type: 'warning',
              message: '审核人不能是自己!'
            });
            return;
          }
          this.$confirm('你是否要通过审核?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 提交审核逻辑
            console.log('审核通过', this.currentRow, this.reviewForm);
            Object.assign(this.reviewForm, {"purchaseOrderNumber": this.currentRow.purchaseOrderNumber})
            this.$axios.post("http://localhost:8090/purchase-order/review",this.reviewForm).then(({ data }) => {
              console.log(data);
              if(data){
                this.$message({
                  type: 'success',
                  message: '审核成功!'
                });
                this.reviewForm = {
                  reviewer: '',
                  reason: '',
                  reviewerTime: ''
                };
                this.initTable();
                this.reviewDialogVisible = false; // 隐藏弹出框
              }else{
                this.$message({
                  type: 'error',
                  message: '审核失败!'
                });
              }
            });
            this.reviewDialogVisible = false;
          });
        } else {
          console.log('审核失败');
          return false;
        }
      });
    },
    //拒绝请求
    noReview() {
      this.$confirm('是否拒绝该订单审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get("http://localhost:8090/purchase-order/"+this.currentRow.purchaseOrderNumber).then(({ data }) => {
          console.log(data);
          if(data){
            this.$message({
              type: 'success',
              message: '你已成功拒绝该订单审核!'
            });
            this.reviewForm = {
              reviewer: '',
              reason: '',
              reviewerTime: ''
            };
            this.initTable();
            this.reviewDialogVisible = false; // 隐藏弹出框
          }else{
            this.$message({
              type: 'error',
              message: '拒绝该订单审核失败!'
            });
          }
        });
      });
    },
    handleSearch() {
      // 处理查询逻辑
      this.initTable(); // 重新初始化表格数据以应用查询条件
    },
    resetSearch() {
      // 重置查询条件
      this.searchForm = {
        register: "",
        supplierCompanyName: "",
        checkTag: "S001-1",
        registerTime: []
      };
      this.initTable(); // 重新初始化表格数据以重置查询条件
    },
    //打开弹出框
    handleReview(row) {
      this.currentRow = row; // 存储当前选中的行数据
      console.log(this.currentRow);
      this.reviewDialogVisible = true; // 显示弹出框
      this.orderInfo.register = row.register;
      this.orderInfo.registerTime = row.registerTime;
      this.orderInfo.purchaseOrderNumber = row.purchaseOrderNumber;
      this.orderInfo.totalPrice = row.totalPrice;
      this.$axios.get("http://localhost:8090/purchase-order-details/" + row.purchaseOrderNumber).then(({ data }) => {
        console.log(data);
        this.productTableData = data.map(item => ({
          image: item.product.imgLink,
          price: item.price,
          name: item.product.name,
          unit: item.product.unit,
          count: item.count,
          subtotal: item.subtotal
        }));
      });
    },
    getCheckTagText(checkTag) {
      switch (checkTag) {
        case 'S001-1':
          return '未审核';
        case 'S001-2':
          return '审核未通过';
        case 'S001-3':
          return '审核通过';
        default:
          return checkTag;
      }
    },
    handleSizeChange() {
      this.initTable(); // 重新初始化表格数据以应用分页大小变化
    },
    handleCurrentChange() {
      this.initTable(); // 重新初始化表格数据以应用当前页码变化
    }
  },
  mounted() {
    this.initTable();
  }
};
</script>

<style scoped>
/* 添加一些样式以确保页面美观 */
.demo-form-inline {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-table >>> .el-table__header tr th {
  background-color: lightgray;
  color: black;
}
</style>

